<template>
	<div class="title">
		<img :src="backImgSrc" alt="返回" @click="onClickBack" />
		<span>{{ classify }}</span>
	</div>
</template>

<script>
import { useRouter } from 'vue-router';

export default {
	name: 'PageHeader',
	props: {
		classify: {
			type: String,
			default: '默认界面',
		},
	},
	setup() {
		const router = useRouter();

		const backImgSrc = 'src/assets/images/backImg.png';

		// 返回上一页
		const onClickBack = () => {
			router.go(-1);
		};

		return {
			backImgSrc,
			onClickBack,
		};
	},
};
</script>

<style lang="less" scoped>
.title {
    background-color: rgba(165, 214, 63, 1);
    height: 40px;
    border-radius: 0 0 30px 0;
    position: relative;
    display: flex;
    align-items: center;

	img {
		width: 30px;
		position: absolute;
		left: 13px;
	}

	span {
		position: absolute;
		left: 48.5px;
		/** 文本1 */
		font-size: 16px;
		font-weight: 700;
		letter-spacing: 2px;
		color: rgba(56, 56, 56, 1);
		font-family: '思源黑体';
	}
}
</style>
